<template>
	<view class="ChineseBookshelf">
		<!-- 跳转搜索页面 -->
		<SearchNav @handle="searchNav" />
		<!-- 二级分类 -->
		<CardEC :showTop="index!==0" @top="()=>cardECTopFn(item)" @delete="()=>cardECDelFn(item)" :id="item.id"
			v-for="(item,index) in groups" :key="index" :label="item.name" :list="item.list">
			<CardGrid type="ChineseBookshelf" @handle="cardecFn" @delete="deleteFn" :list="item.list" />
		</CardEC>
		<!-- 制作和添加新绘本 -->
		<MakeAdd />
		<!-- 使页面内容完全展示  兼容sticky-->
		<view class="padding-top-sm"></view>
		<!-- 对话框 -->
		<Modal :show="deleteOption.show" @confirm="confirmModelFn" @cancel="cancelModelFn" title="提示">
			<view class="padding">
				{{deleteOption.name}}，是否确认删除?
			</view>
		</Modal>
		<!-- 分享送vip -->
		<view @click="navToVipFn" class="share-vip">分享送VIP</view>
	</view>
</template>

<script>
	import SearchNav from '@/plugin/search_nav.vue';
	import CardEC from '@/plugin/card_ec.vue';
	import MakeAdd from '@/plugin/make_add.vue';
	import CardGrid from '@/plugin/card_grid.vue';
	import Modal from '@/plugin/modal.vue';

	import * as api from '@/api/ChineseBookshelf/index.js';

	import Share from '@/utils/share.js';

	export default {
		mixins: [Share],
		components: {
			SearchNav,
			CardEC,
			MakeAdd,
			CardGrid,
			Modal
		},
		data() {
			return {
				// 一级分类
				tabCur: 0,
				tabCurValue: [],
				scrollLeft: 0,
				// 二级分类
				groups: [{
					list: [{}, {}, {}]
				}, {
					list: [{}, {}, {}]
				}],
				// 将要删除的绘本
				deleteOption: {
					show: false
				},
				// 分享
				share: {
					title: '中文书架',
					path: '/pages/ChineseBookshelf/index', // 全局分享的路径
					imageUrl: '', // 全局分享的图片(可本地可网络)
				}
			}
		},
		async onLoad() {
			await this.categoriesRequest();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.categoriesRequest();
		},
		methods: {
			// 分享送vip
			navToVipFn() {
				uni.navigateTo({
					url: "/personPages/Share/index"
				})
			},
			// 置顶
			async cardECTopFn(item) {
				let res = await api.markGroupTop(item.id);
				if (res.code === 0) {
					this.groups = this.$options.data().groups;
					await this.getBookGroupsFn(this.tabCur);
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 0
						})
					})
				}
			},
			// 关闭弹出框
			cancelModelFn() {
				this.$set(this.deleteOption, 'show', false);
			},
			// 移除绘本组
			async delGroupFn() {
				let res = await api.removeGroup(this.deleteOption.id);
				if (res.code === 0) {
					this.groups = this.$options.data().groups;
					await this.getBookGroupsFn(this.tabCur);
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 0
						})
					})
				}
			},
			// 从绘本集中删除绘本
			async delSetIdFn() {
				let res = await api.removeFromSet(this.deleteOption.id);
				if (res.code === 0) {
					this.groups = this.$options.data().groups;
					this.getBookGroupsFn(this.tabCur)
				}
			},
			// 确认弹出框
			confirmModelFn() {
				try {
					console.log()
					switch (this.deleteOption.delType) {
						case 'groupId':
							this.delGroupFn();
							break;
						case 'setId':
							this.delSetIdFn()
							break;
						default:
							break;
					}
				} finally {
					this.cancelModelFn();
				}
			},
			// 打开弹出框 绘本组
			cardECDelFn(item) {
				let {
					id,
					name
				} = item;
				this.deleteOption = {
					show: true,
					delType: 'groupId',
					id,
					name
				};
			},
			// 打开弹出框 绘本集
			deleteFn(item) {
				this.deleteOption = {
					show: true,
					delType: 'setId',
					...item
				};
			},
			// 三级分类跳转事件
			cardecFn(value) {
				uni.navigateTo({
					url: "/pages/Bookcase/index?id=" + value.id
				})
			},
			// 一级
			async categoriesRequest() {
					let res = await api.categories();
					if (res.code === 0) {
						this.tabCurValue = res.data;
						if (this.tabCurValue.length > 0) {
							this.tabSelect(this.tabCurValue[0]['id']);
						}
					}
			},
			// 一级分类选中事件
			tabSelect(value) {
				this.groups = this.$options.data().groups;
				// 选中居中
				this.centerFn(value);
				this.getBookGroupsFn(value)
			},
			// 请求绘本数据
			async getBookGroupsFn(value) {
				uni.showLoading({
					title: "数据加载中……"
				});
				try {
					// 对应的绘本集
					let res = await api.bookGroups(value);
					if (res.code === 0) {
						this.groups = res.data;
					}
				} finally {
					uni.hideLoading()
					uni.stopPullDownRefresh();
				}
			},
			// 居中
			centerFn(val) {
				let index = this.tabCurValue.findIndex(item => item.id == val);
				if (index == -1) return;
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.tabCur = val;
				if (index == 0) {
					this.scrollLeft = 0;
					return;
				}
				let that = this;
				uni.createSelectorQuery().selectAll('.cu-item').boundingClientRect(function(res) {
					let scrollLeft = 0;
					let center = that.windowWidth / 2 - (res[index]['width'] / 2 + 5);
					res.slice(0, index).forEach(item => scrollLeft += item.width + 10);
					if (center && scrollLeft > center) {
						that.scrollLeft = scrollLeft - center
					} else {
						that.scrollLeft = scrollLeft;
					}
				}).exec(function() {
					//上述布局位置信息获取成功后执行的回调函数
				})
			},
			// 点击搜索功能
			searchNav() {
				uni.navigateTo({
					url: '/pages/Search/index'
				})
			},
		}
	}
</script>

<style lang="scss">
	.ChineseBookshelf {

		.ChineseBookshelf-nav {
			position: sticky;
			top: -2upx;
			z-index: 100;

			view.cur {
				border: 0;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					left: 25%;
					bottom: 20upx;
					width: 50%;
					border-bottom: 6upx solid;
				}

			}
		}

	}
</style>